<!-- 条件筛选 -->
<template>
	<view class="filter-placeholder">
		<view class="filter">
			<view class="search-box">
				<input class="search-input" type="text" placeholder="请输入关键词" confirm-type="search"
					v-model="keyword" @confirm="handleSearch()" />
				<button class="iconfont search-btn" @click="handleSearch()">&#xe600;</button>
				<button v-if="keyword" class="iconfont clear-btn" @click="handleClear()">&#xe603;</button>
			</view>
			<view class="tabs">
				<view class="tabs-item" v-for="(item, index) in tabs" :key="item.value"
					:class="[{'active': item.value === tabsValue}, 'tabs-item-' + index]"
					@click="handleChangeTab(item, index)">
					{{item.label}}
				</view>
				<view class="swiper" :style="{'left': swiperLeft}"></view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted, getCurrentInstance, nextTick, computed } from 'vue';

	const emits = defineEmits(['update:modelValue', 'change']);
	const tabsValue = defineModel();
	const tabs = [
		{ value: '0', label: '需求' },
		{ value: '1', label: '问答' },
	];
	
	// 导航栏高度
	const navbarHeight = function() {
		const statusBarHeight = getApp().globalData.statusBarHeight;
		const navBarHeight = getApp().globalData.navBarHeight;
		return statusBarHeight + navBarHeight + 'px';
	}();

	// 获取页面实例对象
	const instance = ref({});
	onMounted(() => {
		instance.value = getCurrentInstance();
		
		handleChangeTab(tabs[tabsValue.value], tabsValue.value);
	});

	const swiperLeft = ref('');
	const handleChangeTab = (item, index) => {
		if (tabsValue.value === item.value) return;
		emits('change', item.value);
		emits('update:modelValue', item.value);

		nextTick(() => {
			const query = uni.createSelectorQuery().in(instance.value)
			query.select('.tabs-item-' + index).boundingClientRect((data) => {
				swiperLeft.value = data.left + data.width / 2 + 'px';
			}).exec();
		})
	}

	const keyword = ref('');
	const handleSearch = () => {

	}

	const handleClear = () => {
		keyword.value = ''
	}
</script>

<style lang="scss" scoped>
	.filter-placeholder {
		height: 170rpx;

		.filter {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9;
			width: 100%;
			background-color: white;
			box-sizing: border-box;
		}
	}

	.search-box {
		flex-shrink: 0;
		position: relative;
		margin: 10rpx 30rpx 0;
		box-sizing: border-box;

		.search-input {
			width: 100%;
			height: 74rpx;
			font-size: 28rpx;
			border-radius: 40rpx;
			background-color: #F2F1F2;
			padding: 0 84rpx;
			box-sizing: border-box;

			&:active {
				background-color: #fafafa;
			}
		}

		.search-btn {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			width: 84rpx;
			height: 74rpx;
			font-size: 40rpx;
			color: #CCCCCC;
			text-align: center;
			line-height: 74rpx;
			background-color: transparent;
		}

		.clear-btn {
			position: absolute;
			top: 0;
			right: 0;
			z-index: 1;
			width: 74rpx;
			height: 74rpx;
			font-size: 36rpx;
			color: #CCCCCC;
			text-align: center;
			line-height: 74rpx;
			background-color: transparent;
		}
	}

	.tabs {
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: flex-end;
		height: 86rpx;
		padding-bottom: 18rpx;
		box-sizing: border-box;

		&-item {
			font-weight: 500;
			font-size: 30rpx;
			color: #666666;
			line-height: 1;
			padding: 30rpx 30rpx 0;
			transition: font-size 0.2s;

			&.active {
				font-weight: bold;
				font-size: 34rpx;
				color: #222222;
			}
		}

		.swiper {
			position: absolute;
			bottom: 0;
			left: 240rpx;
			width: 46rpx;
			height: 9rpx;
			background: #FE3C26;
			border-radius: 5rpx;
			transform: translateX(-50%);
			transition: left 0.2s;
		}
	}
</style>